<template>
  <div>
    <!-- 使用 div 创建一个带有图标的文件选择触发器 -->
    <div class="file-select-trigger" @click="openFileDialog" v-show="isFileInputVisible">
      <el-icon name="picture-outline"></el-icon>
      <span>请选择图片格式文件</span>
    </div>

    <!-- 隐藏的原生文件选择 input -->
    <input
        type="file"
        accept="image/*"
        multiple
        ref="fileInput"
        style="display: none"
        @change="handleFileChange"
    />

    <!-- 旧头像预览区域 -->
    <div v-if="oldAvatar && !files.length" @click="openFileDialog" class="file-preview clickable">
      <img :src="oldAvatar" alt="Old avatar" style="max-width: 150px; height: auto;">
    </div>

    <!-- 文件预览区域 -->
    <div v-for="(file, index) in files" :key="index" @click="openFileDialog" class="file-preview clickable">
      <!-- 显示文件的预览 -->
      <img :src="file.preview" :alt="file.name" style="max-width: 150px; height: auto;">
    </div>
  </div>
</template>

<script>
export default {
  name: 'PicUploadForm',
  props: {
    // 假设我们传递一个 prop 来设置旧头像的 URL
    oldAvatarUrl: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      files: [], // 用于存储选中的文件数组，每个文件对象包含预览属性
      isFileInputVisible: true, // 控制文件选择框的显示与隐藏
      oldAvatar: '', // 存储旧头像的URL
    };
  },
  watch: {
    // 监听 oldAvatarUrl 的变化
    oldAvatarUrl(newVal) {
      this.oldAvatar = newVal;
      if (this.oldAvatar) {
        this.isFileInputVisible = false;
      } else {
        this.isFileInputVisible = true;
      }
    }
  },
  created() {
    // 在组件创建时设置旧头像的URL
    this.oldAvatar = this.oldAvatarUrl;
    if (this.oldAvatar) {
      this.files.push({
        name: '旧头像',
        preview: this.oldAvatar,
        file: null
      });
      this.isFileInputVisible = false;
    }
  },
  methods: {
    // 触发隐藏的文件选择器的点击事件
    openFileDialog() {
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      const selectedFiles = Array.from(event.target.files);
      selectedFiles.forEach((file) => {
        if (file.type.startsWith('image/')) {
          const reader = new FileReader();
          reader.onload = (e) => {
            const fileObj = {
              name: file.name,
              preview: e.target.result,
              file: file
            };
            // 清空之前的文件选择
            this.files = [fileObj];
            // 在用户选择文件后，立即触发自定义事件将文件信息传递给父组件
            this.$emit('file-selected', fileObj);
          };
          reader.readAsDataURL(file);
        }
      });
      // 隐藏文件选择框
      this.isFileInputVisible = false;
    }
  },
};
</script>

<style scoped>
.file-select-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  color: #666;
}

.file-select-trigger:hover {
  background-color: #f0f0f0;
}

.file-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.file-preview img {
  max-width: 150px;
  height: auto;
}

.file-preview.clickable:hover {
  opacity: 0.8;
}
</style>
